<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>学生选课管理系统</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
      body{
          height:calc(100vh);
          display:flex;
          flex-direction:column;
          justify-content:space-between;
          margin:0;
      }

      .site-title{
          background-color:#000066;
          color:white;
          margin:0;
          padding:10px;
      }

      .logo{
          color:orange;border:solid 2px orange;
          border-radius:5px;padding:2px;
          margin-right: 12px;
      }

      .main{
          flex-grow: 1;
          border: 0;
      }

      .footer{
          border-top:solid 1px grey;
          font-size:10px;
          padding: 6px;
      }

      nav{
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: solid 2px grey;
          padding: 2px;
      }
      ul{
          padding:12px;
          margin: 0;

      }

      nav li{
          display: inline-block;
          justify-content: space-between;
          margin: auto 6px;
      }

      nav a:hover{
          background-color: blue;
          color: white;
          font-weight:bold;
      }

      a{
          text-decoration:none;
      }

      nav .active{
          border-bottom: solid 2px purple;
          font-weight: bold;
      }
  </style>
</head>
<body id="app">
<div style="color: white; font-size:6px; text-align:center;
    position: absolute; top:3px;right:10px;padding: 0 15px;">
  <img src="img.png" width="100" height="100">
</div>
<div class="header">
  <h2 class="site-title">
      <span class="logo">&sect;&prop;</span><span>学生选课管理系统</span>
  </h2>
  <nav>
    <ul>
      <li v-for = "(menu,index) in menus">
        <a target="content-frame"
           v-bind:key="menu.href"
           v-bind:class="{'active': active==index}"
           v-bind:href="menu.href"
           v-on:click="active=index">{{menu.text}}</a>
      </li>
    </ul>
  </nav>
  <div id="qrcode" ></div>
</div>
<iframe class="main" name="content-frame" src="home.html" width="100%" ></iframe>
<div class="footer">
  <p> &copy;Copyright JEE SWUST.</p>
</div>
<script>
  // VUE 应用实例对象
  const app = {
    data(){
      return {
        active: 0,   // 标记活动菜单索引号
        menus:[
          {text:'首页',href:"home.html"},
          {text:'课程管理',href:"course.html"},
          {text:'学院管理',href:"college.html"},
          {text:'学生管理',href:"student"},
          {text:'选课管理',href:"course-student.html"}
        ]
      }
    }
  }

  Vue.createApp(app).mount('#app');
</script>
</body>
</html>